<template>
    <div style="text-align: left;" class="business">
        <Row>
            <Form ref="formValidate2" :model="formValidate2" :rules="formRules" :label-width="120">
                <!-- 逾期金额 -->
                <Col span="12">
                    <FormItem label="逾期金额" prop="costAmt">
                        <Row>
                            <Col span="8">
                                <RuiNumber  v-model="formValidate2.costAmt"  type="currency" disabled/>
                            </Col>
                            <Col span="4" offset="1">
                                <Button type="primary" @click="openModalInterest">每期罚息明细</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
            </Form>

            <!-- 费用金额 -->
            <Form ref="formData2" :model="formData2" :rules="formRules" :label-width="120">
                <Col span="12">
                    <FormItem label="费用金额" :rules="formRules" prop="costAmt">
                        <Row>
                            <Col span="8">
                                <RuiNumber  v-model="formData2.costAmt" type="currency" disabled/>
                            </Col>
                            <Col span="4" offset="1">
                                <Button type="primary" @click="openModalRent">每期费用明细</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Col>
            </Form>
        </Row>
        <Row>
            <Form ref="formData" :model="formData" :rules="formRules" :label-width="120"
                  :disabled="isApprove||this.params.readOnly">
                <Row>
                    <Col span="12">
                        <FormItem label="豁免金额最小值" prop="minAmt">
<!--                            <Input clearable v-model="formData.minAmt"-->
<!--                                   @on-change="getReductionRatioAndExemptionAmt('minAmt')" placeholder/>-->

                            <RuiNumber type="currency" :percision="2"  v-model="formData.minAmt"  />
                        </FormItem>

                    </Col>
                    <Col span="12">
                        <FormItem label="豁免金额最大值" prop="maxAmt">
<!--                            <Input clearable v-model="formData.maxAmt"-->
<!--                                   @on-change="getReductionRatioAndExemptionMaxAmt('maxAmt')"-->
<!--                                   />-->
                            <RuiNumber type="currency" :percision="2" v-model="formData.maxAmt"  />
                        </FormItem>
                    </Col>
                    <Col  span="24">
                        <FormItem label="豁免原因" prop="exemptReason">
                            <Input type="textarea" class="business-textarea" v-model="formData.exemptReason"
                                   placeholder="请输入豁免原因（必填）"/>
                        </FormItem>
                    </Col>
<!--                    <Col :xs="12" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">-->
<!--                        <FormItem label="豁免最小比例" prop="minRatio">-->
<!--                            <Input clearable v-model="formData.minRatio"-->
<!--                                   @on-change="getReductionRatioAndExemptionAmt('minRatio')" placeholder/>-->
<!--                        </FormItem>-->
<!--                        <FormItem label="豁免最大比例" prop="maxRatio">-->
<!--                            <Input clearable v-model="formData.maxRatio"-->
<!--                                   @on-change="getReductionRatioAndExemptionMaxAmt('maxRatio')" placeholder/>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
                </Row>
                <!--                <Col :xs="12" :sm="12" :md="12" :lg="8" :xl="6" :xxl="6">-->
                <!--                    <FormItem label="豁免原因" prop="exemptReason">-->
                <!--                        <Input type="textarea" class="business-textarea" v-model="formData.exemptReason"-->
                <!--                               placeholder="请输入豁免原因（必填）"/>-->
                <!--                    </FormItem>-->
                <!--                </Col>-->
                <Row>

                </Row>
            </Form>

        </Row>

        <Row>
            <Col :xs="12">
                <FormItem label="申请资料:" required>
                    <Button type="primary" @click="openUploadModal()">申请资料</Button>
                </FormItem>
            </Col>
        </Row>
        <UploadFileModal
            ref="uploadFileModal"
            :modal="isUploadFileModalOpen"
            @closeModal="closeModal"
            :param="fileParams"
            :isPreview="isApprove"
        />
        <everyInterestDetail
            :isModalOpen="isModalOpenInterest"
            modalTitle="每期罚息明细"
            @closeModalRent="closeModalRent"
            :contractNo="Obj.contractNo"
            ref="everyInterestDetail"
        />
        <everyRentDetail
            :isModalOpen="isModalOpenRent"
            modalTitle="每期费用明细"
            @closeModalRent="closeModalRent"
            :contractNo="Obj.contractNo"
            ref="everyRentDetail"
        />

    </div>
</template>
<script>
    import {
        findByContractNobasicExpense,
        findByContractNoBasicExpenseRecord
    } from "@/projects/basic/api/contract/cost-exempt-bill/index";
    import {deepClone} from "@/libs/utils/ObjectClone";
    import UploadFileModal from "_p/basic/pages/contract/common/uploadFileModal/uploadFileModal";
    import everyInterestDetail from "./everyInterestDetail";
    import everyRentDetail from "./everyRentDetail";
    export default {
        // 业务办理
        name: "business",
        components: {UploadFileModal,everyInterestDetail,everyRentDetail},
        oldData: {},
        props: {
            //对象参数包含：合同号码、角色类型
            Obj: {
                type: Object,
                required: true
            },
            params: {
                type: Object,
                required: true
            },
            isApprove: {
                type: Boolean,
                require: true
            },

        },

        data() {
            return {
                fileParams: {},
                isUploadFileModalOpen: false,
                pageNo: 1,
                caseNo: "",
                isModalOpenRent:false,
                isModalOpenInterest:false,
                formValidate2: {
                    costAmt: null,
                    netOverdueAmt: null,
                },
                formData2: {
                    costAmt: null,
                    expireCostAmt: null,
                },
                formData: {
                    exemptReason: null,
                    costAmt: '',
                    overdueAmt: '',
                    maxAmt: null,
                    minAmt: null,
                    netOverdueAmt: '',
                    expireCostAmt: '',
                    minRatio: '',
                    maxRatio: '',

                },
                formRules: {
                    minAmt: [{required: true, message: "请输入豁免最小值"}],
                    maxAmt: [{required: true, message: "请输入豁免最大值"}],
                    exemptReason: [{required: true, message: "请输入豁免原因", trigger: "blur"}],
                },
            };
        },
        mounted() {
            this.init();
            console.log("this.params", this.params);
        },
        methods: {
            init() {
                this.formData = Object.assign({}, this.formData, this.params);
                this.findByContractNoBasicExpenseRecord();
                this.findByContractNobasicExpense();
            },

            findByContractNoBasicExpenseRecord() {
                console.log("this.params.readOnly",this.params.readOnly)
                if (!this.Obj.contractNo) return;
                findByContractNoBasicExpenseRecord(this.Obj.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.formValidate2 = deepClone(res.data);
                        console.log(this.formValidate2.netOverdueAmt);
                    }
                });
            },
            findByContractNobasicExpense() {
                if (!this.Obj.contractNo) return;
                findByContractNobasicExpense(this.Obj.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.formData2 = deepClone(res.data);
                        console.log(this.formData2.expireCostAmt);
                    };
                });
            },
            // 计算 豁免金额 和 减免比例 & OverdueAmt
            getReductionRatioAndExemptionAmt(type) {

                console.log("getReductionRatioAndExemptionAmt(type)");
                if (this.formData2.costAmt === null){
                    this.formData.minRatio=== '0';

                    return
                }
                // if (type === 'minAmt') {
                //     this.formData.minRatio = this.formData.minAmt / this.formData2.costAmt;
                // }
                // if (type === 'minRatio') {
                //     this.formData.minAmt = this.formData.minRatio / this.formData2.costAmt;
                // }
            },
            // 计算 豁免金额 和 减免比例 & OverdueAmt
            getReductionRatioAndExemptionMaxAmt(type) {
                console.log("getReductionRatioAndExemptionAmt(type)");
                if (this.formData2.costAmt === null){
                    this.formData.minRatio=== '0';

                    return
                }
                if (type === 'maxAmt') {
                    this.formData.maxRatio = this.formData.maxAmt / this.formData2.costAmt;
                }
                if (type === 'maxRatio') {
                    this.formData.maxAmt = this.formData.maxRatio / this.formData2.costAmt;
                }
            },
            closeModalRent() {
                this.isModalOpenRent = false;
                this.isModalOpenInterest = false;
                console.log("closeModalRent.this.isModalOpenInterest",this.isModalOpenInterest)
            },
            // openModal(params = {}) {
            //     params.contractNo = this.Obj.contractNo;
            //     console.log("clcik params", params);
            //     this.afs.newTab(
            //         this,
            //         "projects/basic/pages/contract/contract-inquiry/contract-inquiry-detial/page/CurrentPeriod",
            //         "当期应收",
            //         "ios-add",
            //         params,
            //         "contact-detial-CurrentPeriod-" + this.pageNo,
            //         [],
            //         true
            //     );
            //     this.pageNo += 1;
            // },
            openModalInterest() {
                console.log("this.isModalOpenInterest",this.isModalOpenInterest)
                this.isModalOpenInterest = true;
            },
            openModalRent () {

                this.isModalOpenRent = true;

            },
            /*
             * formData 数据验证 验证通过后 将数据传回父级处理  (保存/提交/审核 通用)
             * @param {String} funcName 回传给父级的方法 (注意父级需要传方法)
             * @param {Object} [data]   父级带来的数据
             */
            formValidate(funcName, data) {
                if (!funcName) return;
                this.$refs.formData.validate(valid => {
                    if (valid) {
                        let d = Object.assign({}, data, this.formData, this.Obj);
                        this.$emit(funcName, d);
                    } else {
                        this.$Message.error("请填写正确的信息!");
                        this.$emit("closeSpin");
                        verifyErrorToView(this.$refs.formData.fields);
                    }
                });
            },
            openUploadModal() {
                console.log(this.params,"this.params53131123132132")
                if (this.Obj.caseNo || this.formData.caseNo||this.params.caseNo) {
                    this.fileParams = {
                        belongNo: this.Obj.contractNo || this.formData.contractNo||this.params.caseNo,
                        busiNo: this.Obj.caseNo || this.formData.caseNo||this.params.caseNo,
                        busiType: 'costExemptBill',
                        busiData: {},
                        busiNodes: 'costExemptBill', //业务节点
                    };
                    this.isUploadFileModalOpen = true;
                } else {
                    this.$Modal.warning({
                        title: "警告",
                        content: "请先保存业务数据！"
                    });
                    return;
                }
            },
            closeModal() {
                // 获取文件长度
                let l = this.$refs.uploadFileModal.getFileList()
                console.log(' 文件长度为：', l);

                this.isUploadFileModalOpen = false;
            },
            showSpin() {
                this.$emit("showSpin");
            },

        }
    };
</script>
<style lang="less">
    .business form {
        width: 80%;

        .business-textarea {
            max-width: 80%;
        }
    }
</style>

